<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../../../favicon.ico">
    <link rel="stylesheet" href="plugin/layui/css/layui.css">
    <script src="plugin/layui/layui.all.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/macarons.js"></script>
    <script src="js/china.js"></script>
    <!--<script src="js/countUp.js"></script>-->
    <script src="js/data01.js"></script>
    <title>双预防监控大屏</title>
    <style>
        .anchorBL {
            display: none
        }

        .main .aside-right .trend:after {
            position: absolute;
            z-index: -10000;
            top: 0;
            width: 100%;
            height: 100%;
            background: url(../img/bor1_6.png) no-repeat;
            background-size: 100% 100%;
            content: "";
        }

        .main .aside-right .area-rank:after {
            z-index: -10000;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background: url(../img/bor1_5.png) no-repeat;
            background-size: 100% 100%;
            content: "";
        }

        .span_title {
            position: absolute;
            top: 10%;
            left: 50%;
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
            font-size: 28px;
        }

        header span {
            font-family: 'Finger Paint', fantasy;
        }

        .warning {
            color: red !important;
            font-family: 'Finger Paint', fantasy;
        }

        .ok {
            color: lightgreen !important;
            font-family: 'Finger Paint', fantasy;
        }
    </style>
</head>
<body>
<div id="page-vue" class="first-screen root-wrap" style="display: none;">
    <header>
        <!--<img src="img/title1.png">-->
        <span class="span_title">双预防监控大屏</span>
        <div class="gifImg">
            <span class="month-tip">{{new Date().getFullYear()}}年{{new Date().getMonth()+1}}月</span>
        </div>
        <div class="title_img"><img src="img/title_left_school.png" alt=""></div>
    </header>
    <div class="main clearfix">
        <div class="aside-left fl">
            <div class="top left-top">
                <h3 @click="patrolListClick()">近期巡查<span style="margin-left: 10px;font-size:12px;z-index: 10000"
                                                         id="gd13">详情》</span></h3>
                <div class="tit clearfix">
                    <span class="ranking fl"></span>
                    <span class="name fl">风险点</span>
                    <span class="company fl">巡查人</span>
                    <span class="hot fl">巡查结果</span>
                </div>
                <div class="con-wrap">
                    <div class="over-wrap" style="width: 100%">
                        <ul class="con">
                            <li class="active">
                                <div class="book-rank clearfix">
                                    <span class="ranking fl">1</span>
                                    <span class="name fl">党的十九19大报告辅导读本+中国共产党章程 全2册</span>
                                    <span class="company fl">人民出版社</span>
                                    <span class="hot fl">9.85</span>
                                </div>
                                <div class="book-show clearfix">
                                    <div class="img-box fl">
                                        <img src="" alt="">
                                    </div>
                                    <div class="content fl">
                                        <p>
                                            <span>作者：</span>
                                            <span class="authors">中共中央宣传部</span>
                                        </p>
                                        <p>
                                            <span>ISBN：</span>
                                            <span class="isbn">9787010184272</span>
                                        </p>
                                        <p>
                                            <span>出版日期：</span>
                                            <span class="pub-date">2017年10月</span>
                                        </p>
                                        <p>
                                            <span>定价：</span>
                                            <span class="pricing">￥37.00</span>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="book-rank clearfix">
                                    <span class="ranking fl">2</span>
                                    <span class="name fl">中国党第十九次全国代表大会文件汇编</span>
                                    <span class="company fl">人民出版社</span>
                                    <span class="hot fl">9.83</span>
                                </div>
                                <div class="book-show clearfix">
                                    <div class="img-box fl">
                                        <img src="" alt="">
                                    </div>
                                    <div class="content fl">
                                        <p>
                                            <span>作者：</span>
                                            <span class="authors">中共中央宣传部</span>
                                        </p>
                                        <p>
                                            <span>ISBN：</span>
                                            <span class="isbn">9787010184326</span>
                                        </p>
                                        <p>
                                            <span>出版日期：</span>
                                            <span class="pub-date">2017年10月</span>
                                        </p>
                                        <p>
                                            <span>定价：</span>
                                            <span class="pricing">￥12.00</span>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="book-rank clearfix">
                                    <span class="ranking fl">3</span>
                                    <span class="name fl">全面从严治党面对面</span>
                                    <span class="company fl">学习出版社</span>
                                    <span class="hot fl">9.68</span>
                                </div>
                                <div class="book-show clearfix">
                                    <div class="img-box fl">
                                        <img src="" alt="">
                                    </div>
                                    <div class="content fl">
                                        <p>
                                            <span>作者：</span>
                                            <span class="authors">中共中央宣传部理论局</span>
                                        </p>
                                        <p>
                                            <span>ISBN：</span>
                                            <span class="isbn">9787514707663</span>
                                        </p>
                                        <p>
                                            <span>出版日期：</span>
                                            <span class="pub-date">2017年03月</span>
                                        </p>
                                        <p>
                                            <span>定价：</span>
                                            <span class="pricing">￥19.80</span>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="book-rank clearfix">
                                    <span class="ranking fl">4</span>
                                    <span class="name fl">现代汉语词典(第7版) </span>
                                    <span class="company fl">商务印书馆有限公司</span>
                                    <span class="hot fl">9.66</span>
                                </div>
                                <div class="book-show clearfix">
                                    <div class="img-box fl">
                                        <img src="" alt="">
                                    </div>
                                    <div class="content fl">
                                        <p>
                                            <span>作者：</span>
                                            <span class="authors">中国社会科学院语言研究所词典编辑室</span>
                                        </p>
                                        <p>
                                            <span>ISBN：</span>
                                            <span class="isbn">9787100124508</span>
                                        </p>
                                        <p>
                                            <span>出版日期：</span>
                                            <span class="pub-date">2016年09月</span>
                                        </p>
                                        <p>
                                            <span>定价：</span>
                                            <span class="pricing">￥109.00</span>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="book-rank clearfix">
                                    <span class="ranking fl">5</span>
                                    <span class="name fl">解忧杂货店</span>
                                    <span class="company fl">南海出版公司</span>
                                    <span class="hot fl">9.65</span>
                                </div>
                                <div class="book-show clearfix">
                                    <div class="img-box fl">
                                        <img src="" alt="">
                                    </div>
                                    <div class="content fl">
                                        <p>
                                            <span>作者：</span>
                                            <span class="authors">(日)东野圭吾</span>
                                        </p>
                                        <p>
                                            <span>ISBN：</span>
                                            <span class="isbn">9787544270878</span>
                                        </p>
                                        <p>
                                            <span>出版日期：</span>
                                            <span class="pub-date">2014年05月</span>
                                        </p>
                                        <p>
                                            <span>定价：</span>
                                            <span class="pricing">￥39.50</span>
                                        </p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bottom left-bottom">
                <div class="bottom-in">
                    <h3 @click="userListClick()">人员巡查情况<span style="margin-left: 10px;font-size:12px;z-index: 10000"
                                                             id="gd14">详情》</span></h3>
                    <div class="tit clearfix">
                        <span class="ranking fl"></span>
                        <span class="short fl">巡查人</span>
                        <span class="hot fl">完成/总</span>
                    </div>
                    <ul class="con">

                    </ul>
                </div>
            </div>
        </div>
        <div class="middle-map fl">
            <div class="map-wrap">
                <h3 class="clearfix" style="z-index: 999">
                    <dl class="fl">
                        <dt>巡检排查</dt>
                        <dd id="book-data" class="unit-number">853</dd>
                    </dl>
                    <dl class="fl">
                        <dt>隐患整改</dt>
                        <dd id="varity-data" class="unit-type">25</dd>
                    </dl>
                    <dl class="fl">
                        <dt>通知公告</dt>
                        <dd id="sales-data" class="unit-wanyuan">30,340</dd>
                    </dl>
                    <dl class="fl">
                        <dt>风险点数</dt>
                        <dd id="risk-data" class="unit-wanyuan">22</dd>
                    </dl>
                    <dl class="fl">
                        <dt>应急培训</dt>
                        <dd id="stock-data" class="unit-wanyuan">12,710</dd>
                    </dl>
                </h3>
                <span class="title-map" style="z-index: 999;">风险分布四色图</span>
                <div id="allmap" style="height: 100%!important;width: 100%;"></div>
            </div>
        </div>
        <div class="aside-right fl">
            <div class="pie clearfix">
                <div class="pie1 fl">
                    <h3>各项完成率</h3>
                    <div id="pie1" style="width: 100%;height: 80%;"></div>
                </div>
                <div class="pie2 fl">
                    <h3>各等级告警</h3>
                    <div id="pie2" style="width: 100%;height: 80%;"></div>
                </div>
            </div>
            <div class="area-rank">
                <h3 @click="zoneListClick()">各区域任务执行情况 <span style="margin-left: 10px;font-size:12px;z-index: 10000"
                                                             id="gd1">详情》</span>
                </h3>

                <!--<div class="chart-wrap" id="repair" title="点击查看详情">-->
                <!--</div>-->

                <div class="con" style="margin-top: 10px">
                    <ul>
                        <li>
                            <span class="num">1</span>
                            <span class="city-name">湖南</span>
                            <span class="bar">
                  <b class="bar-in"></b>
                </span>
                            <span class="rank-value">1875万</span>
                        </li>
                        <li>
                            <span class="num">2</span>
                            <span class="city-name">上海</span>
                            <span class="bar">
                    <b class="bar-in"></b>
                  </span>
                            <span class="rank-value">1649万</span>
                        </li>
                        <li>
                            <span class="num">3</span>
                            <span class="city-name">云南</span>
                            <span class="bar">
                  <b class="bar-in"></b>
                </span>
                            <span class="rank-value">1396万</span>
                        </li>
                        <li>
                            <span class="num">4</span>
                            <span class="city-name">湖北</span>
                            <span class="bar">
                  <b class="bar-in"></b>
                </span>
                            <span class="rank-value">1225万</span>
                        </li>
                        <li>
                            <span class="num">5</span>
                            <span class="city-name">江苏</span>
                            <span class="bar">
                  <b class="bar-in"></b>
                </span>
                            <span class="rank-value">1203万</span>
                        </li>
                        <li>
                            <span class="num">6</span>
                            <span class="city-name">江西</span>
                            <span class="bar">
                  <b class="bar-in"></b>
                </span>
                            <span class="rank-value">1108万</span>
                        </li>
                        <li>
                            <span class="num">7</span>
                            <span class="city-name">内蒙古</span>
                            <span class="bar">
                  <b class="bar-in"></b>
                </span>
                            <span class="rank-value">740万</span>
                        </li>
                        <li>
                            <span class="num">8</span>
                            <span class="city-name">四川</span>
                            <span class="bar">
                  <b class="bar-in"></b>
                </span>
                            <span class="rank-value">695万</span>
                        </li>
                        <li>
                            <span class="num">9</span>
                            <span class="city-name">浙江</span>
                            <span class="bar">
                  <b class="bar-in"></b>
                </span>
                            <span class="rank-value">667万</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="trend">
                <h3 @click="hiddenListClick()">当月隐患走势图
                    <span style="margin-left: 10px;font-size:12px;z-index: 1000"
                          id="gd2">详情》</span></h3>
                <div id="trendBar1" style="width: 100%;height: 80%;"></div>
            </div>
        </div>
    </div>
    <div class="main-bottom">
        <span class="line1"></span>
        <span class="line2"></span>
        <span class="line3"></span>
    </div>
</div>
<!-- import Vue before Element -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>

<script src="../../../../assets/bundle.js"></script>
<script type='text/javascript' src='../../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-vue',
        data: {
            typeJson: {
                0: '分',
                1: '时',
                2: '天',
                3: '周',
                4: '月',
                5: '年',
            },
            point: []
        },
        methods: {
            userListClick() {
                layui.use("layer", function () {
                    layer.open({
                        title: false,
                        type: 2,
                        shade: [0.8, '#0f0f10'],
                        content: ['page/sumarybyuser.html', 'no'],
                        area: ['1000px', '600px'],
                        success: function (layero, index) {
                        }
                    });
                })
            },
            patrolListClick() {
                layui.use("layer", function () {
                    layer.open({
                        title: false,
                        type: 2,
                        shade: [0.8, '#0f0f10'],
                        content: ['page/patrolexcute.html', 'no'],
                        area: ['1000px', '600px'],
                        success: function (layero, index) {
                        }
                    });
                })
            },
            hiddenListClick() {
                layui.use("layer", function () {
                    layer.open({
                        title: false,
                        type: 2,
                        shade: [0.8, '#0f0f10'],
                        content: ['page/hidden.html', 'no'],
                        area: ['1000px', '600px'],
                        success: function (layero, index) {
                        }
                    });
                })
            },
            zoneListClick() {
                layui.use("layer", function () {
                    layer.open({
                        title: false,
                        type: 2,
                        shade: [0.8, '#0f0f10'],
                        content: ['page/zone.html', 'no'],
                        area: ['1000px', '600px'],
                        success: function (layero, index) {
                        }
                    });
                })
            },
            getMap() {
                // 地图
                // 百度地图API功能
                let marker = {};
                let map = new BMap.Map("allmap", {
                    enableMapClick: false
                });
                map.setMapStyle(SiteConfig.mapStyle)
                // convertGCJ02ToBD09 中国正常GCJ02坐标---->百度地图BD09坐标
                let xpi = Math.PI * 3000.0 / 180.0;
                let z = Math.sqrt(SiteConfig.account.lng * SiteConfig.account.lng + SiteConfig.account.lat * SiteConfig.account.lat) + 0.00002 * Math.sin(SiteConfig.account.lat * xpi);
                let theta = Math.atan2(SiteConfig.account.lat, SiteConfig.account.lng) + 0.000003 * Math.cos(SiteConfig.account.lng * xpi);
                let lng = z * Math.cos(theta) + 0.0065;
                let lat = z * Math.sin(theta) + 0.006;
                map.centerAndZoom(new BMap.Point(lng, lat), 24);
                map.enableScrollWheelZoom(true);
                // map.setMapStyle({
                //     styleJson: [
                //         {
                //             "featureType": "building",
                //             "elementType": "labels",
                //             "stylers": {
                //                 "visibility": "off"
                //             }
                //         }
                //     ]
                // });
                HttpUtil.get('SceneForColor/List', {projectNo: SiteConfig.account.projectNo}).success((res) => {
                    let data = res.data;
                    var obj = [];
                    if (data.length > 0) {
                        for (let i = 0; i < data.length; i++) {
                            let color = 'blue'
                            switch (data[i].grade) {
                                case  1:
                                    color = 'red';
                                    break;
                                case  2:
                                    color = 'orange';
                                    break;
                                case  3:
                                    color = 'yellow';
                                    break;
                                case  4:
                                    color = 'blue';
                                    break;
                            }
                            let rectangle = new BMap.Polygon([
                                new BMap.Point(data[i].lng1, data[i].lat1),
                                new BMap.Point(data[i].lng2, data[i].lat2),
                                new BMap.Point(data[i].lng3, data[i].lat3),
                                new BMap.Point(data[i].lng4, data[i].lat4),
                            ], {
                                strokeColor: "white",
                                strokeWeight: 2,
                                strokeOpacity: 0.5,
                                fillColor: color,
                            });

                            let point = this.getCenterPoint(rectangle.getPath());
                            var list = rectangle.getPath();
                            for (let i = 0; i < list.length; i++) {
                                obj.push(list[i]);
                            }
                            let label = new BMap.Label(data[i].zone_name, {
                                offset: new BMap.Size(-40, -25),
                                position: point
                            });
                            map.addOverlay(label);
                            map.addOverlay(rectangle);
                        }
                    }
                    let point = this.getCenterPoint(obj);
                    map.centerAndZoom(new BMap.Point(point.lng, point.lat), 24);
                    map.enableScrollWheelZoom(true);
                })
            },
            getCenterPoint(path) {
                var x = 0.0;
                var y = 0.0;
                for (var i = 0; i < path.length; i++) {
                    x = x + parseFloat(path[i].lng);
                    y = y + parseFloat(path[i].lat);
                }
                x = x / path.length;
                y = y / path.length;
                return new BMap.Point(x, y);
            },
            /**
             * 获取风险巡查
             */
            getRiskPatrol() {
                let param = {
                    projectNo: SiteConfig.account.projectNo,
                    pagesize: 5,
                    processflag: '2,4'
                }
                let str = '';
                HttpUtil.get('Patrolexcute/getRiskStatus', param).success((r) => {
                    $(".aside-left .top ul").html('');
                    if (r.data.length != 0) {
                        for (var i = 0; i < (r.data.length > 5 ? 5 : r.data.length); i++) {
                            if (r.data[i].img) {
                                if (r.data[i].img.indexOf('http') != -1) {
                                    r.data[i].img = r.data[i].img;
                                } else {
                                    r.data[i].img = SiteConfig.webApiset + r.data[i].img;
                                }
                            }
                            r.data[i].progress_Text = r.data[i].alarmSituation == 0 ? "无隐患" : "有隐患";
                            r.data[i].text_Color = r.data[i].alarmSituation == 0 ? "ok" : "warning";
                            str = '<li>' +
                                '<div class="book-rank clearfix">' +
                                '<span class="ranking fl">' + (i + 1) + '</span>' +
                                '<span class="name fl">' + r.data[i].patrolName + '</span>' +
                                '<span class="company fl">' + r.data[i].userName + '</span>' +
                                '<span class="hot fl ' + r.data[i].text_Color + '">' + r.data[i].progress_Text + '</span>' +
                                '</div>' +
                                '<div class="book-show clearfix"><div class="img-box fl" style="height: 101px">' +
                                ' <img src="' + r.data[i].img + '" alt=""></div>' +
                                ' <div class="content fl">' +
                                '<p><span>巡检人员：</span><span class="authors">' + r.data[i].userName + '</span></p>' +
                                '<p><span>巡查周期：</span><span class="isbn">' + r.data[i].cycle + this.typeJson[r.data[i].cycleType] + '</span></p>' +
                                '<p><span>巡查时间：</span><span class="pub-date">' + r.data[i].missionTime + '</span></p>' +
                                '<p><span>巡查说明：</span><span class="pricing">' + r.data[i].missionDetail + '</span></p>' +
                                '</div></div>'
                            '</li>';
                            $(".aside-left .top ul").append(str);
                        }
                        let parentNode = $('.aside-left .top ul');
                        let m = 0;
                        setInterval(() => {
                            parentNode[0].children[m].setAttribute('class', 'active');
                            if (r.data.length != 1 && m != 0) {
                                parentNode[0].children[m - 1].removeAttribute('class');
                            } else if (r.data.length != 1 && m == 0) {
                                parentNode[0].children[r.data.length - 1].removeAttribute('class');
                            }
                            if (m == (r.data.length - 1)) {
                                m = 0;
                            } else {
                                m = m + 1;
                            }
                        }, 3000)
                    }
                })
            },
            /**
             * 人员统计
             */
            getPatrolSummary() {
                $(".aside-left .bottom ul").html('');
                let param = {
                    wf_tasktime: '',
                    pageno: 1,
                    pagesize: 9,
                }

                HttpUtil.get('Risk/riskSummaryByUser', param).success((r) => {
                    if (r.data.length != 0) {
                        // <li>
                        //     <div class="book-rank clearfix">
                        //         <span class="ranking fl">1</span>
                        //         <span class="short fl">化学工业出版社</span>
                        //         <span class="hot fl">9.85</span>
                        //         </div>
                        //         </li>
                        for (var i = 0; i < r.data.length; i++) {
                            let str = '';
                            str += '<li>';
                            str += '<div class="book-rank clearfix">';
                            str += '<span class="ranking fl">' + parseInt(i + 1) + '</span>';
                            str += '<span class="short fl">' + r.data[i].userName + '</span>';
                            str += '<span class="hot fl">' + r.data[i].finished + '/' + r.data[i].total + '</span>';
                            str += '</div>';
                            str += '</li>';
                            $(".aside-left .bottom ul").append(str);
                        }
                    }
                });

            },

            getPatrolByZone() {
                let param = {
                    wf_tasktime: '',
                    pageno: 1,
                    pagesize: 9,
                }
                HttpUtil.getV2('Patrolexcute/getRiskPercentByZone', param).success((r) => {
                    var len = r.data.length;
                    $('.aside-right .area-rank ul').html('');
                    html = '';
                    // if (len > 5) {
                    //     $('#gd1').css('display', 'block');
                    // }
                    // else {
                    //     $('#gd1').css('display', 'none');
                    // }

                    for (var i = 0; i < (len > 5 ? 5 : len); i++) {
                        var pro = r.data[i].zone_name;
                        var val = r.data[i].finished;
                        var total = r.data[i].total;
                        html += '<li>' +
                            '<span class="num">' + (i + 1) + '</span>' +
                            '<span class="city-name" style="white-space: nowrap">' + pro + '</span>' +
                            '<span class="bar" style="margin-left: 10px">' +
                            '<b class="bar-in" style="width: 0px"></b>' +
                            '</span>' +
                            '<span class="rank-value">' + val + '个' + '</span>' +
                            '</li>'
                    }

                    $('.aside-right .area-rank ul').html(html)
                })
            },
            /**
             * Map统计
             */
            getMapSummary() {
                let param = {
                    projectNo: SiteConfig.account.projectNo,
                }
                HttpUtil.get('CompanyBbs/CampusSummaryByProjectNo', param).success((r) => {
                    $('#book-data').text(r.data[0].riskdealted + r.data[0].riskondealt);
                    $('#varity-data').text(r.data[0].wfdealted + r.data[0].wfondealt);
                    $('#sales-data').text(r.data[0].bbsreaded + r.data[0].bbsnoread);
                    $('#stock-data').text(r.data[0].trainreaded + r.data[0].trainnoread);
                })
                HttpUtil.get('Risk/List', param).success((r) => {
                    $('#risk-data').text(r.total)
                })
            },
            /**
             * 当月隐患走势图
             */
            getDangerous() {

                HttpUtil.get('Screen/dayStatictis', {}).success((res) => {
                    //index9
                    let chartData = {
                        xdata: [],
                        ydata: [],
                    }
                    var i = 0;
                    for (let key in res.data[0]) {
                        i++;
                        if (i > 15)
                            continue;
                        chartData.xdata.push(res.data[0][key].day);
                        chartData.ydata.push(res.data[0][key].dangerous + res.data[0][key].handy);
                    }
                    let trendBar1 = echarts.init(document.getElementById("trendBar1"));

                    let optionBar = {
                        grid: {
                            top: 50,
                            bottom: "20%"
                        },
                        legend: {
                            data: ["隐患"],
                            right: "5%",
                            itemWidth: 18,
                            itemHeight: 12,
                            textStyle: {
                                color: "#fff"
                            }
                        },
                        xAxis: {
                            data: chartData.xdata,
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "#07bffb"
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                interval: 0
                            }
                        },
                        yAxis: [
                            {
                                name: "隐患(/个)",
                                axisLine: {
                                    show: false,
                                    lineStyle: {
                                        color: "#07bffb"
                                    }
                                },
                                splitLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                interval: 5,
                                min: 0,
                                max: 20,
                                position: "left"
                            },

                        ],
                        series: [
                            {
                                name: "隐患",
                                type: "line",
                                barWidth: "40%",
                                barGap: 5,
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [
                                                {
                                                    offset: 0,
                                                    color: "#00fecc"
                                                },
                                                {
                                                    offset: 0.8,
                                                    color: "#2690cf"
                                                }
                                            ],
                                            false
                                        )
                                    }
                                },
                                data: chartData.ydata
                            },
                        ]
                    };
                    trendBar1.setOption(optionBar);

                })

            },
            getWorkFlowType() {
                HttpUtil.get('Screen/workflowTypeList').success((res) => {
                    let data = res.data
//   // 饼图
                    var pie1 = echarts.init(document.getElementById('pie1'), 'macarons');
                    var pieRich = {
                        big: {
                            fontSize: 24,
                            lineHeight: 40,
                            fontFamily: 'Rubik'
                        },
                        small: {
                            fontSize: 16
                        },
                    }
                    var pieOption1 = {
                        legend: {
                            x: 'left',
                            data: [],
                            top: '68%',
                            left: 'center',
                            itemWidth: 15,
                            itemHeight: 8,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        series: [
                            {
                                name: '销售占比',
                                type: 'pie',
                                radius: ['55%', '65%'],
                                hoverOffset: 5,
                                center: ['50%', '35%'],
                                avoidLabelOverlap: false,
                                color: ['#0239a7', '#fff', '#00bbec'],
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    }
                                    ,
                                    emphasis: {
                                        show: true,
                                        color: '#fff',
                                        formatter: function (params, ticket, callback) {
                                            // console.log
                                            return '{big|' + params.value + '}{small|%}\n{small|' + params.name + '}';
                                        },
                                        // '{a|这段文本采用样式a}'
                                        rich: pieRich
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: []
                            }
                        ]
                    };
                    pie1.currentIndex = -1;
                    pie1.setOption(pieOption1);
                    setInterval(function () {
                        var dataLen = pieOption1.series[0].data.length;
                        // 取消之前高亮的图形
                        pie1.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: pie1.currentIndex
                        });
                        pie1.currentIndex = (pie1.currentIndex + 1) % dataLen;
                        // 高亮当前图形
                        pie1.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: pie1.currentIndex
                        });
                    }, 1000);

                    var Jan = [
                        {
                            value: parseInt(data[1].totalCounts) == 0 ? 0 : ((parseInt(data[1].finish) / parseInt(data[1].totalCounts)) * 100).toFixed(0),
                            name: '巡检',
                            label: {
                                normal: {
                                    formatter: '{c}%\n\n{b}'
                                }
                            }
                        },
                        {
                            value: parseInt(data[2].totalCounts) == 0 ? 0 : ((parseInt(data[2].finish) / parseInt(data[2].totalCounts)) * 100).toFixed(0),
                            name: '随手拍',
                            label: {
                                normal: {
                                    formatter: '{c}%\n\n{b}'
                                }
                            }
                        },
                        {
                            value: parseInt(data[3].totalCounts) == 0 ? 0 : ((parseInt(data[3].finish) / parseInt(data[3].totalCounts)) * 100).toFixed(0),
                            name: '整改',
                            label: {
                                normal: {
                                    formatter: '{c}%\n\n{b}'
                                }
                            }
                        }
                    ]
                    var
                        pieDataFn = function (monthIndex) {
                            var curD1 = Jan;
                            var len = curD1.length;
                            for (var i = 0; i < len; i++) {
                                pieOption1["legend"]["data"].push(curD1[i]["name"]);
                            }
                            pieOption1.series[0].data = curD1;
                            pie1.setOption(pieOption1);
                        }
                    pieDataFn(0);

                    function setVal() {
                        clearTimeout(timer);
                        timer = setInterval(function () {
                            pieDataFn(0);
                            presstimerFn(0);
                        }, 2000);
                    }
                })
            },
            getErrorGroup() {
                //告警分布
                HttpUtil.get('GovStatistics/getGradeAlarmByZone', {
                    UserId: SiteConfig.account.id,
                    year: 0,
                    month: 0
                }).success((res) => {
                    let data = res.data
                    var pie2 = echarts.init(document.getElementById('pie2'), 'macarons');
                    var pieRich = {
                        big: {
                            fontSize: 24,
                            lineHeight: 40,
                            fontFamily: 'Rubik'
                        },
                        small: {
                            fontSize: 16
                        },
                    }

                    var pieOption2 = {
                        legend: {
                            x: 'left',
                            data: [],
                            top: '68%',
                            left: 'center',
                            itemWidth: 15,
                            itemHeight: 8,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        series: [
                            {
                                name: '库存占比',
                                type: 'pie',
                                radius: ['55%', '65%'],
                                hoverOffset: 5,
                                avoidLabelOverlap: false,
                                color: ['#0239a7', '#fff', '#00bbec', '#23539b', '#24feb4', '#1397ff'],
                                center: ['50%', '35%'],
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    }
                                    ,
                                    emphasis: {
                                        show: true,
                                        color: '#fff',
                                        formatter: function (params, ticket, callback) {

                                            return '{big|' + params.value + '}{small|%}\n{small|' + params.name + '}';
                                        },
                                        // '{a|这段文本采用样式a}'
                                        rich: pieRich
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: []
                            }
                        ]
                    };
                    pie2.currentIndex = -1;
                    pie2.setOption(pieOption2);
                    setInterval(function () {
                        var dataLen = pieOption2.series[0].data.length;
                        // 取消之前高亮的图形
                        pie2.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: pie2.currentIndex
                        });
                        pie2.currentIndex = (pie2.currentIndex + 1) % dataLen;
                        // 高亮当前图形
                        pie2.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: pie2.currentIndex
                        });
                    }, 1000);

                    var Jan = [
                        {
                            value: data[0].one,
                            name: '重大风险',
                            label: {
                                normal: {
                                    formatter: '{c}%\n\n{b}'
                                }
                            }
                        },
                        {
                            value: data[0].two,
                            name: '较大风险',
                            label: {
                                normal: {
                                    formatter: '{c}%\n\n{b}'
                                }
                            }
                        },
                        {
                            value: data[0].three,
                            name: '一般风险',
                            label: {
                                normal: {
                                    formatter: '{c}%\n\n{b}'
                                }
                            }
                        }
                        ,
                        {
                            value: data[0].four,
                            name: '低风险',
                            label: {
                                normal: {
                                    formatter: '{c}%\n\n{b}'
                                }
                            }
                        }
                    ]


                    var pieDataFn = function (monthIndex) {
                        var curD2 = Jan;
                        var len = curD2.length;
                        for (var i = 0; i < len; i++) {
                            pieOption2["legend"]["data"].push(curD2[i]["name"]);
                        }
                        pieOption2.series[0].data = curD2;
                        pie2.setOption(pieOption2);
                    }
                    pieDataFn(0);

                    function setVal() {
                        clearTimeout(timer);
                        timer = setInterval(function () {
                            pieDataFn(0);
                            presstimerFn(0);
                        }, 2000);
                    }
                })
            }
        },
        created: function () {
            $('#page-vue').show();
        },
        mounted: function () {
            let date = TimeUtil.convertToString(new Date()).substr(0, 7);
            this.getDangerous();
            this.getRiskPatrol();
            this.getPatrolSummary();
            this.getWorkFlowType();
            this.getErrorGroup();
            this.getMapSummary();
            this.getPatrolByZone();
            this.getMap();
        }
    });


</script>
<script src="js/index.js"></script>
<script src="js/mapIndex.js"></script>
</body>
</html>
